<template>
  <div class="import-flow route-page">
    <section class="header">
      <a-page-header title="导入流水记录" @back="goBack"> </a-page-header>
    </section>
    <section class="content">
      <a-card>
        <a-table
          :dataSource="dataSource"
          :columns="columns"
          :pagination="pagination"
          @change="handleTableChange"
          rowKey="id"
        >
          <template #bodyCell="{ text, record, index, column }">
            <template v-if="column.key === 'success_count'">
              <span>{{ record.task_count - record.fail_count }}</span>
            </template>
            <template v-if="column.key === 'action'">
              <a-button
                type="link"
                @click="viewClick(record.id, record.template_id)"
                style="margin: 0; padding-left: 11px"
                >查看</a-button
              >
            </template>
          </template>
          <!-- 搜索 -->
          <template
            #customFilterDropdown="{
              setSelectedKeys,
              selectedKeys,
              confirm,
              clearFilters,
              column,
            }"
          >
            <div style="padding: 8px">
              <div
                v-if="column.dataIndex == 'created_at'"
                style="margin-bottom: 8px"
              >
                <a-range-picker
                  v-model:value="import_date"
                  :ranges="{
                    今天: [moment().startOf('day'), moment()],
                    昨天: [
                      moment().startOf('day').subtract(1, 'days'),
                      moment().endOf('day').subtract(1, 'days'),
                    ],
                    本周: [
                      moment().startOf('week').subtract('weeks'),
                      moment(),
                    ],
                    本月: [
                      moment().startOf('months').subtract('months'),
                      moment(),
                    ],
                  }"
                />
              </div>
              <a-input
                v-else
                ref="searchInput"
                :placeholder="`搜索 ${column.title}`"
                :value="selectedKeys[0]"
                style="width: 188px; margin-bottom: 8px; display: block"
                @change="
                  (e) => setSelectedKeys(e.target.value ? [e.target.value] : [])
                "
                @pressEnter="handleSearch(selectedKeys, confirm, column)"
              />
              <a-button
                type="primary"
                size="small"
                style="width: 90px; margin-right: 8px"
                @click="handleSearch(selectedKeys, confirm, column)"
              >
                搜索
              </a-button>
              <a-button
                size="small"
                style="width: 90px"
                @click="handleReset(clearFilters, confirm, column)"
              >
                重置
              </a-button>
            </div>
          </template>
          <template #customFilterIcon="filtered">
            <SearchOutlined
              :style="{ color: filtered ? '#108ee9' : undefined }"
            />
          </template>
        </a-table>
      </a-card>
    </section>
  </div>
</template>

<script>
import {
  defineComponent,
  onBeforeUnmount,
  reactive,
  ref,
  toRaw,
  toRefs,
  watch,
  computed,
} from "vue";
import { useRouter, useRoute } from "vue-router";
// import { PlusOutlined } from "@ant-design/icons-vue";
import { Form, message } from "ant-design-vue";
import store from "../../../store";
import request from "../../../common/utils/request";
import moment from "moment";
import {
  FileTextOutlined,
  InboxOutlined,
  EyeOutlined,
  PlusOutlined,
  SearchOutlined,
} from "@ant-design/icons-vue";
const useForm = Form.useForm;
const dateFormatStr = "YYYY-MM-DD";

export default defineComponent({
  name: "billFlowImportRecord",
  components: {
    FileTextOutlined,
    InboxOutlined,
    EyeOutlined,
    PlusOutlined,
    SearchOutlined,
    VNodes: (_, { attrs }) => {
      return attrs.vnodes;
    },
  },
  setup() {
    const $router = useRouter();
    const $route = useRoute();
    const goBack = () => {
      $router.back();
    };

    const state = reactive({
      dataSource: [],
      columns: [
        {
          title: "导入时间",
          dataIndex: "created_at",
          width: "15%",
          align: "center",
          customFilterDropdown: true,
        },
        {
          title: "经办人",
          dataIndex: "cuser_uname",
          width: "15%",
          align: "center",
          customFilterDropdown: true,
        },
        {
          title: "模板名称",
          dataIndex: "template_name",
          width: "15%",
          align: "center",
          customFilterDropdown: true,
        },
        {
          title: "总行数",
          dataIndex: "task_count",
          width: "15%",
          align: "center",
        },
        {
          title: "成功数量",
          dataIndex: "success_count",
          key: "success_count",
          width: "15%",
          align: "center",
        },
        {
          title: "失败数量",
          dataIndex: "fail_count",
          width: "15%",
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "id",
          key: "action",
          width: "10%",
          align: "center",
        },
      ],
      total: 0,
      page: 1,
      pageSize: 10,
      filters: {}, //筛选项

      import_date: [], //导入时间（筛选用）
    });

    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
    }));

    const handleTableChange = (pager, filters, sorter) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      if (filters) {
        for (let key in filters) {
          if (filters[key] && filters[key].length > 0) {
            filters[key] = filters[key][0];
          }
          if (filters[key] && filters[key].length == 0) {
            delete filters[key];
          }
        }
        state.filters = filters;
        console.log(state.filters);
      }
      getList();
    };

    const handleSearch = (selectedKeys, confirm, column) => {
      if (column.dataIndex == "created_at") {
        if (state.import_date.length == 2) {
          getList();
        }
      }
      confirm();
    };

    const handleReset = (clearFilters, confirm, column) => {
      if (column.dataIndex == "created_at") {
        if (state.import_date.length == 2) {
          state.import_date = [];
          getList();
        }
      }
      clearFilters();
      confirm();
    };

    const getList = () => {
      let params = {
        page: state.page,
        limit: state.pageSize,
      };
      if (state.filters) {
        for (let key in state.filters) {
          params[key] = state.filters[key];
        }
      }
      if (state.import_date.length == 2) {
        params.created_start = moment(state.import_date[0]).format(
          "YYYY-MM-DD"
        );
        params.created_end = moment(state.import_date[1]).format("YYYY-MM-DD");
      }
      request
        .post("/org", "/stream/templateImportList", { ...params })
        .then((res) => {
          if (res.list) {
            state.dataSource = res.list;
            state.total = res.total;
          } else {
            state.dataSource = [];
            state.total = 0;
          }
        });
    };

    const viewClick = (id, template_id) => {
      $router.push({ name: "importBillFlow", query: { id, template_id } });
    };

    const init = () => {
      getList();
    };

    init();

    return {
      ...toRefs(state),
      goBack,
      pagination,
      handleTableChange,
      handleSearch,
      handleReset,
      viewClick,
      moment,
    };
  },
});
</script>

<style lang="less" scoped>
.import-flow {
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    height: 50px;
    background: #fff;
    &:deep(.ant-page-header) {
      padding: 10px 20px;
    }
  }
  &.back-class {
    :deep(.ant-page-header-back) {
      display: none;
    }
  }
  .content {
    flex: 1;
    padding: 10px;
    margin: 10px 0;
    max-height: 100%;
    overflow-y: auto;
    .building {
      height: 500px;
    }
  }
  .footer {
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    background: #f7f7f7;
  }
}
</style>
